import { Card, Breadcrumb, Form, Input, Button, Radio, Space } from 'antd'
import { Link } from 'react-router-dom'
import Channel from '@/components/Channel'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import styles from './index.module.scss'
export default function Publish() {
  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/home'>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>发布文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          autoComplete='off'
          initialValues={{
            content: '',
          }}
        >
          <Form.Item label='标题' name='title'>
            <Input placeholder='请输入文章标题' />
          </Form.Item>
          <Form.Item label='频道' name='channel_id'>
            <Channel />
          </Form.Item>
          <Form.Item label='封面' name='cover'>
            <Radio.Group>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label='内容' name='content'>
            {/* 如果 Form.Item 有 name，会有默认的 value（undefined）作用于 ReactQuill 组件，而这个组件需要初始值是一个字符串 */}
            <ReactQuill />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Space>
              <Button type='primary' htmlType='submit'>
                发布文章
              </Button>
              <Button>存入草稿</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
